{% extends "base.html" %}
{% block title %}Chart View{% endblock %}
{% block styles %}
    {{ super() }}
    <link rel="stylesheet"
          href="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-select/1.13.2/css/bootstrap-select.min.css">
    <link rel="stylesheet" href="/static/css/jquery-ui.min.css">
    <link rel="stylesheet" href="/static/css/lobipanel.min.css">
    <style>
        .loading {
            text-align: center;
            width: 80px;
            height: 40px;
            margin: 0 auto;
        }

        .loading span {
            margin: 0 auto;
            display: inline-block;
            width: 8px;
            height: 100%;
            border-radius: 4px;
            background: lightgreen;
            -webkit-animation: load 1s ease infinite;
        }

        @-webkit-keyframes load {
            0%, 100% {
                height: 40px;
                background: lightgreen;
            }
            50% {
                height: 70px;
                margin: -15px 0;
                background: lightblue;
            }
        }

        .loading span:nth-child(2) {
            -webkit-animation-delay: 0.2s;
        }

        .loading span:nth-child(3) {
            -webkit-animation-delay: 0.4s;
        }

        .loading span:nth-child(4) {
            -webkit-animation-delay: 0.6s;
        }

        .loading span:nth-child(5) {
            -webkit-animation-delay: 0.8s;
        }
    </style>
{% endblock %}
{% block page_content %}
    <div class="loading" id="loadingDiv">
        <span></span>
        <span></span>
        <span></span>
        <span></span>
        <span></span>
    </div>

    <div class="well row">
        <div class="col-md-3">
            <div class="row">
                <h4>Setting</h4>
                <form id="chartForm">
                    <div class="form-group">
                        <label for="chartTitle">Title</label>
                        <input type="text" class="form-control" id="chartTitle" name="chartTitle" placeholder="Title">
                    </div>
                    <div class="form-group">
                        <label for="chartSubTitle">Tag</label>
                        <input type="text" class="form-control" id="tag" name="tag"
                               placeholder="Tag">
                    </div>
                    <div class="form-group">
                        <label for="chartType">ChartType</label>
                        <select class="selectpicker" name="chartType" id="chartType">
                            <option value="Bar">Bar(条形图)</option>
                            <option value="Line">Line(折线图)</option>
                            <option value="Pie">Pie(饼图)</option>
                            <option value="Gauge">Gauge(仪表盘)</option>
                            <option value="Geo">Geo(地理坐标系)</option>
                            <option value="Map">Map(地图)</option>
                            <option value="Funnel">Funnel(漏斗图)</option>
                            <option value="Scatter">Scatter(散点图)</option>
                            <option value="EffectScatter">EffectScatter(动态散点图)</option>
                            <option value="WordCloud">WordCloud(词云图)</option>
                        </select>
                    </div>
                    <div class="form-group">
                        <label for="chartSubTitle">Xaxis Name</label>
                        <input type="text" class="form-control" id="xaxisName" name="xaxisName"
                               placeholder="Xaxis Name">
                    </div>
                    <div class="form-group">
                        <label for="chartType">Xaxis/Attr</label>
                        <select class="selectpicker" name="xaxis" id="xaxis" data-live-search="true">
                        </select>
                    </div>
                    <div class="form-group">
                        <label for="chartSubTitle">Yaxis Name</label>
                        <input type="text" class="form-control" id="yaxisName" name="yaxisName"
                               placeholder="Yaxis Name">
                    </div>
                    <div class="form-group">
                        <label for="chartType">Yaxis/Value</label>
                        <select class="selectpicker" name="yaxis" id="yaxis" data-live-search="true" multiple>
                        </select>
                    </div>
                    <div class="checkbox">
                        <label>
                            <input type="checkbox" id="isDataZoom" name="isDataZoom">isDataZoom
                        </label>
                    </div>
                    <div class="checkbox">
                        <label>
                            <input type="checkbox" id="isVisualMap" name="isVisualMap">isVisualMap
                        </label>
                    </div>
                    <div class="checkbox">
                        <label>
                            <input type="checkbox" id="isConvert" name="isConvert">isConvert
                        </label>
                    </div>
                    <button type="button" class="btn btn-default" id="chartDraw">Draw</button>
                </form>
            </div>
        </div>
        <div class="col-md-9">
            <h4>ChartView</h4>

            <div id="queryBtns" style="float:right;margin-bottom:20px;">
                <button type="button" id="saveChartBtn" class="btn btn-primary">Save
                </button>
            </div>
            <div class="panel panel-default" style="margin-top:65px;">
                <div class="panel-heading">
                </div>
                <div class="panel-body" id="chartCanvas">

                </div>
            </div>
        </div>
    </div>
{% endblock %}

{% block scripts %}
    {{ super() }}
    <script src="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-select/1.13.2/js/bootstrap-select.min.js"></script>
    <script src="/static/js/jquery-ui.min.js"></script>
    <script src="/static/js/lobipanel.min.js"></script>
    <script>
        $(function () {
            $('#loadingDiv').hide();
            $('.panel').lobiPanel({
                reload: false,
                close: false,
                editTitle: false
            });
            var chart;
            $('.lobipanel').on('onSmallSize.lobiPanel', function (ev, lobiPanel) {
                chart.resize();
            });
            $('.lobipanel').on('onFullScreen.lobiPanel', function (ev, lobiPanel) {
                chart.resize();
            });
            $('.lobipanel').on('onResize.lobiPanel', function (ev, lobiPanel) {
                chart.resize();
            });
            var xy_axis = {{ xy_axis|tojson }};
            var sql = "{{ sql|safe }}";
            var is_wrangling = "{{ is_wrangling|safe }}";
            var options = [];
            $.each(xy_axis, function (index, obj) {
                var option = "<option value='" + obj + "'>" + obj + "</option>";
                options.push(option);
            });
            $('#xaxis').html(options);
            $('#yaxis').html(options);
            $('#xaxis').selectpicker('refresh');
            $('#yaxis').selectpicker('refresh');
            $('#xaxis').selectpicker('render');
            $('#yaxis').selectpicker('render');

            $("#chartDraw").click(function () {
                $("#loadingDiv").modal('show');
                $.ajax({
                    type: "post",
                    url: '/query/chart?sql=' + sql + '&is_wrangling=' + is_wrangling,
                    data: $("#chartForm").serialize(),
                    success: function (data) {
                        $('#chartCanvas').empty();
                        var canvas = "<div id='echartcanvas'  style='margin-top:20px;width:100%;background-color: white;min-height: 600px;'></div>";
                        $('#chartCanvas').html(canvas);
                        chart = echarts.init($('#echartcanvas')[0], null, {renderer: 'canvas'});
                        //data.custom_function
                        var chart_options = $.parseJSON(data.options);
                        chart.setOption(chart_options);
                        //chart.on("{{ event_name }}", {{ handler_name }});
                        $("#loadingDiv").modal('hide');
                    }
                });
            });

            $("#saveChartBtn").click(function () {
                $.ajax({
                    type: "post",
                    url: '/query/chart/save?sql=' + sql + '&is_wrangling=' + is_wrangling,
                    data: $("#chartForm").serialize(),
                    success: function (data) {
                        window.location.href = '/query/chart/list';
                    }
                });
            });
        })


    </script>
    <script src="https://pyecharts.github.io/assets/js/echarts.min.js"></script>
    <script src="https://pyecharts.github.io/assets/js/china.js"></script>
    <script src="https://pyecharts.github.io/assets/js/echarts-liquidfill.min.js"></script>
    <script src="https://pyecharts.github.io/assets/js/echarts-wordcloud.min.js"></script>

{% endblock %}
